.colorpicker {
	width: 356px;
	height: 176px;
	overflow: hidden;
	position: absolute;
    z-index: 30000;
	background-color: #121212;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	display: none;
}
.colorpicker-fade {
    position: fixed;
    z-index: 29999;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: transparent;
    display: none;
}
.colorpicker_color {
	width: 150px;
	height: 150px;
	left: 14px;
	top: 13px;
	position: absolute;
	background: #f00;
	overflow: hidden;
	cursor: crosshair;
}
.colorpicker_color div {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black)), -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));
}
.colorpicker_color div div {
	position: absolute;
	top: 0;
	left: 0;
	width: 11px;
	height: 11px;
	overflow: hidden;
	border: 1px solid #eae9e9;
  background: transparent;
  border-radius: 13px;
  box-shadow: #121212 1px 1px;
	margin: -5px 0 0 -5px;
}
.colorpicker_hue {
	position: absolute;
	top: 13px;
	left: 180px;
	width: 20px;
	height: 150px;
	background: linear-gradient(to top, red 0%, #ff8000 8%, yellow 17%, #80ff00 25%, lime 33%, #00ff80 42%, aqua 50%, #0080ff 58%, blue 67%, #8000ff 75%, fuchsia 83%, #ff0080 92%, red 100%);
	cursor: row-resize;
}
.colorpicker_hue div {
	position: absolute;
	left: -2px;
	margin: 0;
	width: 22px;
	height: 4px;
	overflow: hidden;
	background-color: #F0F0F0;
	border: 1px solid #b2b2b2;
}
.colorpicker_new_color {
	position: absolute;
	width: 64px;
	height: 30px;
	left: 213px;
	top: 13px;
	background: #f00;
}
.colorpicker_current_color {
	position: absolute;
	width: 64px;
	height: 30px;
	left: 283px;
	top: 13px;
	background: #f00;
}
.colorpicker input {
	background-color: #121212;
	border: 1px solid #2f2f2f;
	position: absolute;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #898989;
	top: 4px;
	right: 11px;
	text-align: right;
	margin: 0;
	padding: 0;
	height: 11px;
}
.colorpicker_hex,
.colorpicker_rgb_r,
.colorpicker_rgb_g,
.colorpicker_rgb_b,
.colorpicker_hsb_h,
.colorpicker_hsb_s,
.colorpicker_hsb_b,
.colorpicker_submit{
  background: linear-gradient(to bottom, #2c2c2c 0%,#2a2a2a 10%, #2e2e2e 20%, #303030 30%, #282727 50%, #242424 60%,#141414 100%);
  border: 1px solid #2f2f2f;
}
.colorpicker_hex {
	position: absolute;
	width: 72px;
	height: 22px;
	left: 212px;
	top: 142px;
}
.colorpicker_hex input {
	right: 6px;
}
.colorpicker_field {
	height: 22px;
	width: 62px;
	background-position: top;
	position: absolute;
}
.colorpicker_field span {
	position: absolute;
	width: 12px;
	height: 22px;
	overflow: hidden;
	top: 0;
	right: 0;
	cursor: n-resize;
}
.colorpicker_field span:before{
  display: block;
  content: '';
  width: 0;
  height: 0;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 4px solid #FFFFFF;
  position: absolute;
  left: 4px;
  top: 6px;
}
.colorpicker_field span:after{
  display: block;
  content: '';
  width: 0;
  height: 0;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 4px solid #FFFFFF;
  position: absolute;
  left: 4px;
  top: 12px;
}
.colorpicker_rgb_r {
	top: 52px;
	left: 212px;
}
.colorpicker_rgb_g {
	top: 82px;
	left: 212px;
}
.colorpicker_rgb_b {
	top: 112px;
	left: 212px;
}
.colorpicker_hsb_h {
	top: 52px;
	left: 282px;
}
.colorpicker_hsb_s {
	top: 82px;
	left: 282px;
}
.colorpicker_hsb_b {
	top: 112px;
	left: 282px;
}
.colorpicker_hex:before,
.colorpicker_rgb_r:before,
.colorpicker_rgb_g:before,
.colorpicker_rgb_b:before,
.colorpicker_hsb_h:before,
.colorpicker_hsb_s:before,
.colorpicker_hsb_b:before{
  color: #bfbfbf;
  position: absolute;
  left: 0.25rem;
  line-height: 22px;
}
.colorpicker_hex::before {
  content: '#';
}
.colorpicker_rgb_r:before{
  content: 'R';
}
.colorpicker_rgb_g:before{
  content: 'G';
}
.colorpicker_rgb_b:before{
  content: 'B';
}
.colorpicker_hsb_h:before{
  content: 'H';
}
.colorpicker_hsb_s:before{
  content: 'S';
}
.colorpicker_hsb_b:before{
  content: 'B';
}
.colorpicker_submit {
	position: absolute;
	right: 12px;
	top: 142px;
	width: auto;
	height: 18px;
	line-height: 18px;
	padding: 2px 4px;
	color: #BFBFBF;
	overflow: hidden;
}
.colorpicker_focus {
	background-position: center;
}
.colorpicker_hex.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_slider {
	background-position: bottom;
}


/*light mode*/
.colorpicker-light.colorpicker {
	background-color: #ebecef;
}
.colorpicker-light .colorpicker_hex:before,
.colorpicker-light .colorpicker_rgb_r:before,
.colorpicker-light .colorpicker_rgb_g:before,
.colorpicker-light .colorpicker_rgb_b:before,
.colorpicker-light .colorpicker_hsb_h:before,
.colorpicker-light .colorpicker_hsb_s:before,
.colorpicker-light .colorpicker_hsb_b:before{
  color: #2D2D2D;
}
.colorpicker-light .colorpicker_hex,
.colorpicker-light .colorpicker_rgb_r,
.colorpicker-light .colorpicker_rgb_g,
.colorpicker-light .colorpicker_rgb_b,
.colorpicker-light .colorpicker_hsb_h,
.colorpicker-light .colorpicker_hsb_s,
.colorpicker-light .colorpicker_hsb_b,
.colorpicker-light .colorpicker_submit {
  color: #2D2D2D;
	background: linear-gradient(to bottom, #ECEAEA 0%,#F4F4F4 20%, #CCD0D8 50%,#CBCFD7 100%);
	border: 1px solid #c8c8c8;
}
.colorpicker-light.colorpicker input {
	color: #2D2D2D;
	background-color: #EBECEF;
	border: 1px solid #c8c8c8;
}
.colorpicker-light .colorpicker_field span::before{
  border-bottom: 4px solid #2D2D2D
}
.colorpicker-light .colorpicker_field span::after{
  border-top: 4px solid #2D2D2D
}